<template>
  <div class="cart_page">
    <table>
<!--  -->
      <thead>
        <tr>
          <th style="width: 8%">
            <i
              :class="
                checkAll
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
              "
			  @click="changeAlls"></i>
          </th>
          <th style="width: 30%">礼品信息</th>
          <th>兑换分数</th>
          <th>数量</th>
          <th>小计 (鸡腿)</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr  v-for="(item,index) in  checkList" :key="item.id">
          <td>
            <i
              :class="
                checkList[index].isbool
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
            " @click="changeisbool(index)">
			</i>
          </td>
          <td>
            <section>
              <img
                width="84"
                :src="'http://sc.wolfcode.cn'+item.coverImg"
                alt="列表图片"
              />
              <div class="info">
                <h5>{{item.title}}</h5>
                <p>{{item.versionDescription}}</p>
              </div>
            </section>
          </td>
          <td>{{item.coin}}鸡腿</td>
          <td>
            <div class="step">
<!--             <span @click="item.total>1?item.total--:''">-</span>
              <input type="text" disabled v-model="item.total" />
              <span @click="item.total++">+</span> -->
			  <span @click="changeitem(-1,item)">-</span>
			  <input type="text" disabled v-model="item.total" />
			  <span @click="changeitem(1,item)">+</span>
            </div>
          </td>
          <td>{{item.total*item.coin}}鸡腿</td>
          <td>
            <span class="del" @click="delData(item.id,index)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="total">总计：<span>{{totalsAll}}鸡腿</span></div>
    <div class="submit" @click="Putcart">提交</div>
  </div>
</template>
<script>
import {cartsAPI,delAPI,addAPI,CmsCartAPI} from '@/request/api'
export default {
  data() {
    return {
      // 全选
      checkAll: false,
      // 单选按钮数组
      checkList: [],
	  checkListcopy:[],
	  newcart:[],
    };
	
  },
  methods:{
	  async Putcart() {
		    localStorage.removeItem('commodityObj');
	        if (this.totalsAll != 0) {
	          // 把勾选上的商品放到一个数组里面
	          this.checkList.forEach(item => {
	            if(item.isbool){
					const id=item.id;
					const total=item.total;
	              this.newcart.push({id,total})
	            }
	          });
	          // 跳转,携带数据
	          this.topush();
	        } else {
	          alert("您还没有选择商品");
	        }
	  },
	  topush(){
		  const res=CmsCartAPI(JSON.stringify(this.newcart))
	  		  this.$router.push({name: "Affirm",params: {res}})
	  },
	  
	  //添加购物车
	  async recart(item){
	  	const res = await CmsCartAPI({
	  		//商品id
	  		 id:item.id,
	  		 //商品数量
	  		 total:item.total,
	  	})
	  },
	  
		  // this.newcart=this.checkList;
		  // //清空购物车
		  // let num1=0;
		  
		  // for(var i=0;i<this.newcart.length;i++){
			 //  this.PutdelData(this.checkList[i].id);
			 //  num1=i;
		  // }
    //       if(num1==this.newcart.length){
			 //  // //重新提交购物车
			 //  this.newcart.forEach(item=>{
			 //  			  if(item.isbool){
			 //  				  //提交购物车
			 //  						  this.recart(item);
			 //  			  }
			 //  });
		  // }
	  // async recart(item){
	  // 	const res = await addAPI({
	  // 		//商品id
	  // 		 productId:item.id,
	  // 		 //商品数量
	  // 		 total:item.total,
	  // 	})
	  // },
	  
	  // async PutdelData(id){
	  // 	const Res=await delAPI(id); 
	  // },
	  

	  
	  
	  //查看购物车
	  async changeCart(){
	  		const cartsRes=await cartsAPI(); 
			this.checkList=cartsRes.data;
			for(var i=0;i<this.checkList.length;i++){
				//this.$set(对象,'属性',值)
				this.$set(this.checkList[i],'isbool',this.checkListcopy[i]||false)
			}
			this.delitem();
			
			//当数组清空时
			if(this.checkList.length==0){
					this.checkAll=false
			}
	  },
	  
	  //删除方法
	  async delData(id,index){
		  const Res=await delAPI(id); 
		  //删除用于储存数组的一项
		  this.checkListcopy.splice(index,1);
		  this.changeCart();
		  
	  },

	  //封装用于判断的 删除/全选 的方法
	  delitem(){
		  let num=0;
		  this.checkList.forEach(item=>{
		  	  if(item.isbool==false){
		  		  this.checkAll=false
		  	  }else{
		  		  num ++
		  	  }
		  });
		  if(num==this.checkList.length){
		  	 this.checkAll=true
		  }
	  },
	  
	  //链接购物车改变数量
	  async changeitem(val,item){
	  	const res = await addAPI({
	  		//商品id
	  		 productId:item.id,
	  		 //商品数量
	  		 total:item.total+val,
	  		 modified:1
	  	})
	  		this.changeCart();
	  	
	  },
	  

	  
	  // //重新提交购物车
	  // async recart(item){
	  // 	const res = await CmsCartAPI({
	  // 		//商品id
	  // 		 id:item.id,
	  // 		 //商品数量
	  // 		 total:item.total,
	  // 	})
	  // },
	  // //增加数量
	  // add(index){
	  // 		  this.checkList[index].total++;
	  // },
	  // //减少数量
	  // del(index){
	  // 		  if(this.checkList[index].total>1){
	  // 			  this.checkList[index].total--;
	  // 		  }
	  // },
	  
	  
	  //全选
	  changeAlls(){
		  this.checkAll=!this.checkAll;
		  //单选按钮的状态
		  this.checkList.forEach(item=>{
			  item.isbool=this.checkAll
		  })
	  },
	  
	  //单选
	  changeisbool(index){
		  let count=0;
		  this.checkListcopy=[];
		  this.checkList[index].isbool=!this.checkList[index].isbool;
		  this.checkList.forEach(item=>{
			  if(item.isbool==false){
				  this.checkAll=false
			  }else{
				  count ++
			  }
			  this.checkListcopy.push(item.isbool)
		  });
		  if(count==this.checkList.length){
			  this.checkAll=true
		  }

	  },
	  
	  //方法二----代码较多
	  fangfaer(){
		if(fangfa==2){
		
		  //设置进入时的选中状态
		  	  // changeboolfalse(){
		  		 //  this.checkAll=false;
		  	  // 		  for(var i=0;i<this.checkList.length;i++){
		  	  // 				  this.checkList[i].onlyPickUp=false; 
		  	  // 		  }
		  	  // },
		  	  
		  	  //全选按钮
		  	  // changeAll(){
		  		 //  this.checkAll=!this.checkAll
		  		 //  for(var i=0;i<this.checkList.length;i++){
		  			//   this.checkList[i].onlyPickUp=this.checkAll
		  		 //  }
		  		 //  this.gettotalsAll();
		  	  // },
		  	  
		  	  //单选按钮
		  	  // changebool(index){
		  		 //  //判断勾选
				 // let count=0
		  		 //  this.checkList[index].onlyPickUp=!this.checkList[index].onlyPickUp;
		  		  
		  //        //判断与全选按钮的关系
		  		 //  for(var i=0;i<this.checkList.length;i++){
		  			//   if(!this.checkList[i].onlyPickUp){
		  			// 	  this.checkAll=false
		  			//   }else{
					// 	count++
					// }
		  			  
		  		 //  }
				 // if(count==this.checkList.length){
					//  this.checkAll=true
				 // }
		  		 //  this.gettotalsAll();
		  	  // },
		  	  
		  	  
		  	  
		  	  
		  	  // //计算购物车总价
		  	  // gettotalsAll(){
		  		 //  this.totalsAll=0;
		  		 //  for(var i=0;i<this.checkList.length;i++){
		  		 //  		if(this.checkList[i].onlyPickUp==true){
		  		 //  				this.totalsAll=this.totalsAll+this.checkList[i].total*this.checkList[i].coin
		  		 //  			  }
		  		 //  }
		  		  
		  	  // },
		  	  }}
  }, 
  computed:{
	  //计算总价
	  totalsAll(){
		  let total=0;
		  this.checkList.reduce((pre,cur)=>{
			  if(cur.isbool){
				  return total=pre+cur.coin*cur.total
			  }else{
				  return pre
			  }
		  },0)
		  return total
	  }
  },
  created() {
  	this.changeCart();
  }
};
</script>
<style lang="less" scoped>
.cart_page {
  background: #fff;
  table {
    width: 100%;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    color: #666;
    border-collapse: collapse;
    font-size: 14px;
    thead {
      background: #f2f2f2;
      th {
        padding: 19px 0;
        .iconfont {
          cursor: pointer;
        }
        .icon-yduifuxuankuangxuanzhong {
          color: #0a328e;
        }
      }
    }
    tbody {
      tr {
        td {
          vertical-align: middle;
          text-align: center;
          padding: 19px 0;
          table-layout: fixed; // td的宽度固定，不随内容变化
          .iconfont {
            cursor: pointer;
          }
          .icon-yduifuxuankuangxuanzhong {
            color: #0a328e;
          }
          section {
            padding-left: 20px;
            display: flex;
            box-sizing: border-box;
            img {
              margin-right: 12px;
            }
            .info {
              padding-top: 20px;
              flex: 1;
              overflow: hidden;
              box-sizing: border-box;
              text-align: left;
              h5 {
                overflow: hidden;
                color: #333;
                font-size: 18px;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 20px;
              }
              p {
                color: #666;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          .step {
            width: 106px;
            height: 32px;
            margin: auto;
            span {
              float: left;
              width: 30px;
              height: 32px;
              display: block;
              border: solid 1px #d1d1d1;
              font-size: 20px;
              box-sizing: border-box;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 0px;
              color: #999999;
              text-align: center;
              cursor: pointer;
              background: #fff;
            }
            input {
              box-sizing: border-box;
              width: 46px;
              height: 32px;
              float: left;
              text-align: center;
              font-size: 14px;
              line-height: 23px;
              letter-spacing: 0px;
              color: #666666;
              border: 0;
              border-top: 1px solid #d1d1d1;
              border-bottom: 1px solid #d1d1d1;
              background: #fff;
            }
          }
          .del {
            border: 1px solid #ececec;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            &:hover {
              color: #fff;
              background: #0a328e;
            }
          }
        }
      }
    }
  }
  .total {
    padding: 30px 0;
    text-align: right;
    font-size: 22px;
    span {
      font-weight: bold;
      color: #fd604d;
    }
  }
  .submit {
    width: 175px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-family: SourceHanSansSC-Light;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
    cursor: pointer;
    background-color: #0a328e;
    float: right;
  }
}
</style>